<template>
	<div class="contact-container">
		<li>
			<a target="_blank" :href="datas.github"
				><Icon type="github" class="icon" />{{ datas.githubName }}</a
			>
		</li>
		<li>
			<a :href="`mailto:${datas.mail}`" target="_blank"
				><Icon type="mail" />{{ datas.mail }}</a
			>
		</li>
		<li>
			<a
				:href="`tencent://message/?Menu=yes&uin=${datas.qq}&Service=300&sigT=45a1e5847943b64c6ff3990f8a9e644d2b31356cb0b4ac6b24663a3c8dd0f8aa12a595b1714f9d45`"
				><Icon type="qq" />{{ datas.qq }}
			</a>
			<div class="ercode">
				<img :src="datas.qqQrCode" alt="" />
			</div>
		</li>
		<li>
			<a><Icon type="weixin" />{{ datas.weixin }} </a>
			<div class="ercode">
				<img :src="datas.weixinQrCode" alt="" />
			</div>
		</li>
	</div>
</template>

<script>
import { mapState } from "vuex";
import Icon from "@/components/Icon";
export default {
	components: {
		Icon,
	},
	computed: mapState("setting", ["datas"]),
};
</script>

<style scoped lang="less">
@import "~@/styles/mixin.less";
@import "~@/styles/var.less";

@itemheight: 30px;
.contact-container {
	margin: 0;
	padding: 0 20px;
	li {
		position: relative;
		margin: 14px 0;
		height: @itemheight;
		list-style: none;
		color: @gray;
		cursor: pointer;
		a {
			line-height: @itemheight;
			font-size: 14px;
			.icon-container {
				margin-right: 10px;
				font-size: 26px;
				vertical-align: middle;
			}
		}
		.ercode {
			position: absolute;
			padding: 10px 15px;
			background-color: white;
			border-radius: 5px;
			bottom: @itemheight+5px;
			left: 0;
			transform-origin: center bottom;
			transform: scaleY(0);
			transition: all 0.3s ease-in-out;
			img {
				width: 150px;
				height: 150px;
			}
			&::after {
				content: "";
				display: block;
				width: 8px;
				height: 8px;
				position: absolute;
				left: 50%;
				bottom: -4px;
				background: white;
				transform: translateX(-50%) rotate(45deg);
			}
		}
		&:hover {
			color: @primary;
		}
		&:hover .ercode {
			transform: scaleY(1);
		}
	}
}
</style>
